<template>
    <el-form :model="formInline" ref="formInline" style="text-align: center; font-size: 20px" size="medium"
        label-width="180px" class="details">
        <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="流转信息" name="first" class="cardStyle">
                <el-table v-loading :data="opinionInfo" style="width: 100%; border: 1px solid #ebeef5"
                    :row-style="styleRow" :header-row-style="headerRow">
                    <el-table-column prop="uName" label="操作人" width="100" align="center" min-width="12%">
                    </el-table-column>
                    <el-table-column prop="submitTime" label="操作时间" align="center" min-width="12%" sortable>
                    </el-table-column>
                    <el-table-column prop="uTel" label="操作人电话" align="center" min-width="12%"></el-table-column>
                    <el-table-column prop="opinion" label="意见" align="center" min-width="12%"></el-table-column>
                    <el-table-column prop="state" label="状态" align="center" min-width="12%"
                        :formatter="opinionStateFormetter"></el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane :label="stateName" name="second" class="cardStyle">

                <div>
                    <div style="margin-left: 90%; margin-bottom: 1%" v-if="
                adminPermission == '1' &&
                formInline.state == '3' &&
                formInline.taskState == '1'
              ">
                        <span style="margin-right: 10px">编辑</span>
                        <el-switch v-model="editState" active-color="#13ce66" inactive-color="#ff4949"
                            @change="editStateChange">
                        </el-switch>
                    </div>
                    <!-- 拟批准宅基地及建房（规划许可）情况 -->
                    <table align="center" cellspacing="0" class="detailTable" style="width: 100%">
                        <tr>
                            <td rowspan="5" style="width: 80px">
                                拟批准<br />宅基地<br />及建房<br />情况&nbsp;
                            </td>
                            <td colspan="2">宅基地面积（㎡）</td>
                            <td style="text-align: center">
                                <el-input v-model="formInline.applyHomesteadArea" ref="applyHomesteadArea"
                                    autocomplete="off" :disabled="!editState">
                                </el-input>
                            </td>
                            <td colspan="2">房基占地面积（㎡）</td>
                            <td>
                                <el-input v-model="formInline.applyFoundationArea" autocomplete="off"
                                    :disabled="!editState"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>地址</td>
                            <td colspan="5" style="text-align: left">
                                <el-input v-model="formInline.applyAddress" class="input-with-select"
                                    :disabled="!editState">
                                    <el-select v-model="formInline.villageType" slot="append" placeholder="组或社"
                                        style="width: 100px" :disabled="!editState">
                                        <el-option label="组" value="组"></el-option>
                                        <el-option label="社" value="社"></el-option>
                                    </el-select>
                                </el-input>
                            </td>
                        </tr>

                        <tr>
                            <td rowspan="2">四至</td>
                            <td>东至</td>
                            <td>
                                <el-input :disabled="!editState" v-model="formInline.east" autocomplete="off"
                                    placeholder="东至"></el-input>
                            </td>
                            <td>南至</td>
                            <td>
                                <el-input :disabled="!editState" v-model="formInline.south" autocomplete="off"
                                    placeholder="南至"></el-input>
                            </td>
                            <td rowspan="3">
                                建房类型：
                                <el-radio-group v-model="formInline.buildingType" :disabled="!editState">
                                    <el-radio :label="'1'" style="margin-top: 15px">原址翻建</el-radio><br />
                                    <el-radio :label="'2'" style="margin-top: 15px; margin-left: -14px">改扩建
                                    </el-radio><br />
                                    <el-radio :label="'3'" style="margin-top: 15px">异址新建</el-radio><br />
                                    <el-radio :label="'4'" style="margin-top: 15px">其他类型</el-radio><br />
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td>西至</td>
                            <td>
                                <el-input :disabled="!editState" v-model="formInline.west" autocomplete="off"
                                    placeholder="西至"></el-input>
                            </td>
                            <td>北至</td>
                            <td>
                                <el-input :disabled="!editState" v-model="formInline.north" autocomplete="off"
                                    placeholder="北至"></el-input>
                            </td>
                        </tr>

                        <tr>
                            <td>地类</td>
                            <td colspan="4">
                                <el-radio-group v-model="formInline.landType" :disabled="!editState">
                                    <el-radio :label="'1'" style="margin-top: 15px">建设用地</el-radio>
                                    <el-radio :label="'2'" style="margin-top: 15px">未利用地</el-radio><br />
                                    <el-radio :label="'3'" style="margin-top: 15px; margin-left: -72px">农用地
                                    </el-radio>
                                    <el-radio :label="'4'" style="margin-top: 15px">其他</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>

                        <tr>
                            <td style="width: 120px">住房建筑面积（㎡）</td>
                            <td>
                                <el-input v-model="formInline.applyHousingArea" autocomplete="off"
                                    :disabled="!editState"></el-input>
                            </td>
                            <td>建筑层数（层）</td>
                            <td>
                                <el-input v-model.number="formInline.applyLayer" autocomplete="off"
                                    :disabled="!editState"></el-input>
                            </td>
                            <td>建筑高度（m）</td>
                            <td colspan="2">
                                <el-input v-model="formInline.applyHight" autocomplete="off" :disabled="!editState">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 150px">
                                乡镇自<br />然资源<br />部门审<br />查意见
                            </td>
                            <td colspan="6">
                                <el-input ref="initState" type="textarea" placeholder="自然资源部门意见" style="height=50%"
                                    v-model="formInline.naturalOpinions" :disabled="!editState">
                                </el-input>
                            </td>
                        </tr>

                        <tr>
                            <td style="height: 150px">征求其<br />他部门<br />意见</td>
                            <td colspan="6">
                                <el-input ref="initState" type="textarea" placeholder="征求其他部门意见" style="height=50%"
                                    v-model="formInline.otherOpinions" :disabled="!editState">
                                </el-input>
                            </td>
                        </tr>

                        <tr>
                            <td style="height: 150px">
                                乡镇乡<br />建规划<br />部门审<br />查意见
                            </td>
                            <td colspan="3">
                                <el-input ref="initState" type="textarea" placeholder="乡镇乡建规划部门审查意见" style="height=50%"
                                    v-model="formInline.constructionOpinions" :disabled="!editState">
                                </el-input>
                            </td>

                            <td style="height: 150px">
                                乡镇农<br />业农村<br />部门审<br />查意见
                            </td>
                            <td colspan="3">
                                <el-input ref="initState" type="textarea" placeholder="乡镇农业农村部门审查意见" style="height=50%"
                                    v-model="formInline.ruralOpinions" :disabled="!editState">
                                </el-input>
                            </td>
                        </tr>

                        <tr>
                            <td style="height: 150px">
                                乡镇政<br />府审核<br />批准意<br />见
                            </td>
                            <td colspan="6">
                                <el-input ref="initState" type="textarea" placeholder="乡政府审核批准意见" style="height=50%"
                                    v-model="formInline.governmentOpinions" :disabled="!editState">
                                </el-input>
                            </td>
                        </tr>
                    </table>
                </div>

                <el-card style="margin-top: 10px; margin-top: 1%">
                    要件列表
                    <el-collapse v-model="state">
                        <el-collapse-item name="2">
                            <template slot="title">
                                <div class="col-item-titel">
                                    <i class="header-icon el-icon-edit"></i>
                                    业务接件
                                </div>
                            </template>
                            <el-table :data="fileList1" style="margin-top: 1%" v-loading>
                                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                                <el-table-column prop="operation" label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)"
                                            type="primary">预览</el-button>
                                        <el-button size="mini" @click="downDocument(scope.$index, scope.row)"
                                            type="success">下载</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item name="3">
                            <template slot="title">
                                <div class="col-item-titel">
                                    <i class="header-icon el-icon-tickets"></i>
                                    规划许可
                                </div>
                            </template>
                            <el-table :data="fileList2" style="margin-top: 1%" v-loading>
                                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                                <el-table-column prop="operation" label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)"
                                            type="primary">预览</el-button>
                                        <el-button size="mini" @click="downDocument(scope.$index, scope.row)"
                                            type="success">下载</el-button>
                                        <el-button style="margin-right: -66px" size="mini"
                                            @click="updatePermitLicence(scope.$index, scope.row)" type="info" v-if="
                        scope.row.docName == '宅基地批准书' &&
                        formInline.state == '3' &&
                        adminPermission == '1'
                      ">修改</el-button>
                                        <el-button style="margin-right: -66px" size="mini"
                                            @click="updatePermitBook(scope.$index, scope.row)" type="info" v-if="
                        scope.row.docName == '乡村建设规划许可证' &&
                        formInline.state == '3' &&
                        adminPermission == '1'
                      ">修改</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item name="4" v-if="formInline.state >= 4">
                            <template slot="title">
                                <div class="col-item-titel">
                                    <i class="header-icon el-icon-set-up"></i>
                                    施工管理
                                </div>
                            </template>
                            <el-table :data="fileList3" style="margin-top: 1%" v-loading>
                                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                                <el-table-column prop="operation" label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)"
                                            type="primary">预览</el-button>
                                        <el-button size="mini" @click="downDocument(scope.$index, scope.row)"
                                            type="success">下载</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item name="5" v-if="formInline.state >= 5">
                            <template slot="title">
                                <div class="col-item-titel">
                                    <i class="header-icon el-icon-folder-add"></i>
                                    竣工验收
                                </div>
                            </template>
                            <el-table :data="fileList4" style="margin-top: 1%" v-loading>
                                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                                <el-table-column prop="operation" label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)"
                                            type="primary">预览</el-button>
                                        <el-button size="mini" @click="downDocument(scope.$index, scope.row)"
                                            type="success">下载</el-button>
                                        <el-button style="margin-right: -66px" size="mini"
                                            @click="updateCheckForm(scope.$index, scope.row)" type="info" v-if="
                        scope.row.docName ==
                          '农村宅基地和建房（规划许可）验收意见表' &&
                        formInline.state == '5' &&
                        adminPermission == '1'
                      ">修改</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item name="7" v-if="fileList5.length > 0">
                            <template slot="title">
                                <div class="col-item-titel">
                                    <i class="header-icon el-icon-folder-add"></i>
                                    执法告知书
                                </div>
                            </template>
                            <el-table :data="fileList5" style="margin-top: 1%" v-loading>
                                <el-table-column prop="docName" label="要件名称" align="center"></el-table-column>
                                <el-table-column prop="uploadTime" label="上传时间" align="center"></el-table-column>
                                <el-table-column prop="operation" label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditFile(scope.$index, scope.row)"
                                            type="primary">预览</el-button>
                                        <el-button size="mini" @click="downDocument(scope.$index, scope.row)"
                                            type="success">下载</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                    </el-collapse>
                    <el-dialog :visible.sync="centerDialogVisible" center width="36%">
                        <div class="block">
                            <el-image :src="url" ref="printImg" id="printImg"></el-image>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" v-print="'#printImg'" @click="centerDialogVisible = false">打印
                            </el-button>
                        </span>
                    </el-dialog>
                </el-card>
                <el-card style="margin-top: 20px" v-if="formInline.active !== 4">
                    <!-- <el-form-item> -->
                    <el-button type="primary" v-if="this.editState" style="width: 100px" @click="commitPro">修改
                    </el-button>
                    <el-button type="primary" v-if="!this.editState" style="width: 100px" @click="commitPro">提交
                    </el-button>
                    <el-button style="width: 100px" v-if="formInline.active !== 0 && formInline.taskState == 1"
                        @click="onceAgain">重做</el-button>
                    <el-button type="danger" style="width: 100px" v-if="formInline.active !== 0" @click="returnPro">退件
                    </el-button>
                    <el-button type="warning" style="width: 100px" @click="notPass"
                        v-if="formInline.state === 5 && formInline.taskState === 1">执法</el-button>
                    <el-button type="info" style="width: 100px" @click="cancle">取消</el-button>
                    <!-- </el-form-item> -->
                </el-card>

            </el-tab-pane>

            <el-tab-pane label="申请详情" name="third" formatter="processNameFormatter">
                <div class="inputData">
                    <el-card style="font-size: 18px">
                        <!-- 申请户主信息 -->
                        <el-row :gutter="10">
                            <el-col :span="6">
                                <el-form-item label="乡镇街道" prop="townCode">
                                    <el-select v-model="formInline.townCode" style="width: 100%" placeholder="请选择"
                                        @change="townChange" disabled>
                                        <el-option label="请选择乡镇街道" value></el-option>
                                        <el-option v-for="item in formInline.townList" :key="item.code"
                                            :label="item.name" :value="item.code">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="村组社区" prop="villageCode">
                                    <el-select v-model="formInline.villageCode" style="width: 100%" placeholder="请选择"
                                        disabled>
                                        <el-option v-for="item in formInline.villageList" :key="item.code"
                                            :label="item.name" :value="item.code">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="户口类型" prop="addressType">
                                    <el-radio v-model="formInline.addressType" label="城市" style="width: 25%" disabled>城市
                                    </el-radio>
                                    <el-radio v-model="formInline.addressType" label="农村" style="width: 25%" disabled>农村
                                    </el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="业务类型（备注）" v-if="formInline.buildingType == '4'" prop="content">
                                    <el-input v-model="formInline.content" autocomplete="off" ref="contentText">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <table style="width: 100%" align="center" cellspacing="0" class="inputTable">
                            <tr>
                                <td rowspan="2" style="width: 80px">申请户<br />主信息</td>
                                <td><span style="color: red">*</span> 姓名</td>
                                <td style="text-align: center" id="name">
                                    <el-input v-model="formInline.name" autocomplete="off" disabled></el-input>
                                </td>
                                <td style="width: 80px">性别</td>
                                <td>
                                    <el-radio v-model="formInline.sex" label="男" style="width: 25%" disabled>男
                                    </el-radio>
                                    <el-radio v-model="formInline.sex" label="女" style="width: 25%" disabled>女
                                    </el-radio>
                                </td>
                                <td>年龄</td>
                                <td>
                                    <el-input v-model.number="formInline.age" ref="age" autocomplete="off" disabled>
                                    </el-input>
                                </td>
                                <td><span style="color: red">*</span> 联系电话</td>
                                <td id="tel">
                                    <el-input v-model.number="formInline.tel" ref="age" autocomplete="off" disabled>
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>身份证号码</td>
                                <td td colspan="3" id="idCard">
                                    <el-input v-model="formInline.idCard" autocomplete="off" ref="idCardText" disabled>
                                    </el-input>
                                </td>
                                <td>户口所在地</td>
                                <td td colspan="3">
                                    <el-input v-model="formInline.address" autocomplete="off" disabled></el-input>
                                </td>
                            </tr>
                        </table>

                        <table style="width: 100%" align="center" cellspacing="0" class="inputTable">
                            <tr>
                                <td :rowspan="familyMember.length + 1" align="center" style="width: 80px">
                                    家庭成<br />员信息
                                </td>

                                <td>姓名</td>
                                <td>年龄</td>
                                <td>与户主关系</td>
                                <td>身份证号</td>
                                <td>户口所在地</td>
                                <!-- <td>
                  <el-button
                    type="primary"
                    @click="putFailyState = true"
                    size="small"
                    >新增成员</el-button
                  >
                </td> -->
                            </tr>
                            <tr v-for="(fm, i) in familyMember">
                                <td>{{ fm.name }}</td>
                                <td>{{ fm.age }}</td>
                                <td>{{ fm.relation }}</td>
                                <td>{{ fm.idCard }}</td>
                                <td>{{ fm.address }}</td>
                                <!-- <td>
                  <el-button size="mini" @click="handleEdit(fm)" type="primary"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    @click="handleDelete(i, fm)"
                    type="info"
                    >删除</el-button
                  >
                </td> -->
                            </tr>
                        </table>

                        <!-- 现宅基地及农房情况 -->
                        <table style="width: 100%" align="center" cellspacing="0" class="inputTable">
                            <tr>
                                <td rowspan="2" style="width: 80px">
                                    现宅基<br />地及农<br />房情况&nbsp;
                                </td>
                                <td>宅基地面积（㎡）</td>
                                <td style="text-align: center">
                                    <el-input v-model="formInline.nowHomesteadArea" autocomplete="off"
                                        ref="nowHomesteadArea" disabled></el-input>
                                </td>
                                <td>建筑面积（㎡）</td>
                                <td>
                                    <el-input v-model="formInline.nowBuildArea" autocomplete="off" disabled></el-input>
                                </td>
                                <td>权属证书号</td>
                                <td>
                                    <el-input v-model="formInline.nowBookId" autocomplete="off" disabled></el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>现宅基地处置情况</td>
                                <td colspan="5" style="text-align: left">
                                    1.保留:
                                    <el-input v-model="formInline.nowSaveArea" autocomplete="off" style="width: 8%"
                                        disabled></el-input>
                                    （㎡）；<span style="margin-left: 150px">2.退给村集体:</span>
                                    <el-input v-model="formInline.nowReturnArea" autocomplete="off" style="width: 8%"
                                        disabled></el-input>
                                    （㎡）；<span style="margin-left: 150px">3.其他:</span>
                                    <el-input v-model="formInline.nowOtherArea" autocomplete="off" style="width: 8%"
                                        disabled></el-input>（㎡）
                                </td>
                            </tr>
                        </table>

                        <!-- 拟申请宅基地及建房（规划许可）情况 -->
                        <table style="width: 100%" align="center" cellspacing="0" class="inputTableLast">
                            <tr>
                                <td rowspan="6" style="width: 80px">
                                    拟申请<br />宅基地<br />及建房<br />（规划<br />许可）<br />情况&nbsp;
                                </td>
                                <td colspan="2">宅基地面积（㎡）</td>
                                <td style="text-align: center">
                                    <el-input v-model="apply.applyHomesteadArea" ref="applyHomesteadArea"
                                        autocomplete="off" disabled>
                                    </el-input>
                                </td>
                                <td colspan="2">房基占地面积（㎡）</td>
                                <td>
                                    <el-input v-model="apply.applyFoundationArea" autocomplete="off" disabled>
                                    </el-input>
                                </td>
                            </tr>
                            <tr>
                                <td>地址</td>
                                <td colspan="5" style="text-align: left">
                                    <el-input v-model="apply.applyAddress" class="input-with-select" disabled>
                                        <!-- <el-select
                      v-model="formInline.villageType"
                      slot="append"
                      placeholder="组或社"
                      style="width: 100px"
                      disabled
                    >
                      <el-option label="组" value="组"></el-option>
                      <el-option label="社" value="社"></el-option>
                    </el-select> -->
                                    </el-input>
                                </td>
                            </tr>

                            <!-- <tr>
                <td>四至</td>
                <td colspan="4" style="border: none">
                  <tr>
                    <td style="width: 160px">东至</td>
                    <td class="fourSite">
                      <el-input
                        v-model="apply.east"
                        autocomplete="off"
                        disabled
                      ></el-input>
                    </td>
                    <td style="width: 160px">南至</td>
                    <td class="fourSite">
                      <el-input
                        v-model="apply.south"
                        autocomplete="off"
                        disabled
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td style="width: 160px">西至</td>
                    <td class="fourSite">
                      <el-input
                        v-model="apply.west"
                        autocomplete="off"
                        disabled
                      ></el-input>
                    </td>
                    <td style="width: 160px">北至</td>
                    <td class="fourSite">
                      <el-input
                        v-model="apply.north"
                        autocomplete="off"
                        disabled
                      ></el-input>
                    </td>
                  </tr>
                </td>
                <td rowspan="2">
                  建房类型：
                  <el-radio-group v-model="apply.buildingType">
                    <el-radio :label="'1'" style="margin-top: 15px" disabled
                      >原址翻建</el-radio
                    ><br />
                    <el-radio
                      :label="'2'"
                      style="margin-top: 15px; margin-left: -14px"
                      disabled
                      >改扩建</el-radio
                    ><br />
                    <el-radio :label="'3'" style="margin-top: 15px" disabled
                      >异址新建</el-radio
                    ><br />
                    <el-radio :label="'4'" style="margin-top: 15px" disabled
                      >其他类型</el-radio
                    ><br />
                  </el-radio-group>
                </td>
              </tr> -->
                            <tr>
                                <td rowspan="2">四至</td>
                                <td>东至</td>
                                <td>
                                    <el-input disabled v-model="apply.east" autocomplete="off" placeholder="东至">
                                    </el-input>
                                </td>
                                <td>南至</td>
                                <td>
                                    <el-input disabled v-model="apply.south" autocomplete="off" placeholder="南至">
                                    </el-input>
                                </td>
                                <td rowspan="3">
                                    建房类型：
                                    <el-radio-group v-model="apply.buildingType" disabled>
                                        <el-radio :label="'1'" style="margin-top: 15px">原址翻建</el-radio><br />
                                        <el-radio :label="'2'" style="margin-top: 15px; margin-left: -14px">改扩建
                                        </el-radio><br />
                                        <el-radio :label="'3'" style="margin-top: 15px">异址新建</el-radio><br />
                                        <el-radio :label="'4'" style="margin-top: 15px">其他类型</el-radio><br />
                                    </el-radio-group>
                                </td>
                            </tr>
                            <tr>
                                <td>西至</td>
                                <td>
                                    <el-input disabled v-model="apply.west" autocomplete="off" placeholder="西至">
                                    </el-input>
                                </td>
                                <td>北至</td>
                                <td>
                                    <el-input disabled v-model="apply.north" autocomplete="off" placeholder="北至">
                                    </el-input>
                                </td>
                            </tr>

                            <tr>
                                <td>地类</td>
                                <td colspan="4">
                                    <el-radio-group v-model="apply.landType">
                                        <el-radio :label="'1'" style="margin-top: 15px" disabled>建设用地</el-radio>
                                        <el-radio :label="'2'" style="margin-top: 15px" disabled>未利用地</el-radio><br />
                                        <el-radio :label="'3'" style="margin-top: 15px; margin-left: -72px" disabled>农用地
                                        </el-radio>
                                        <el-radio :label="'4'" style="margin-top: 15px" disabled>其他</el-radio>
                                    </el-radio-group>
                                </td>
                            </tr>

                            <tr>
                                <td>住房建筑面积（㎡）</td>
                                <td>
                                    <el-input v-model="apply.applyHousingArea" autocomplete="off" disabled></el-input>
                                </td>
                                <td>建筑层数（层）</td>
                                <td>
                                    <el-input v-model.number="apply.applyLayer" autocomplete="off" disabled></el-input>
                                </td>
                                <td>建筑高度（m）</td>
                                <td>
                                    <el-input v-model="apply.applyHight" autocomplete="off" disabled></el-input>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="7" align="left">
                                    是否征求相邻权利人意见：
                                    <el-radio-group v-model="apply.neighborMind">
                                        <el-radio :label="'是'" aria-checked="true" style="margin-top: 15px; top: -6px"
                                            disabled>是</el-radio>
                                        <el-radio :label="'否'" style="margin-top: 15px; top: -6px" disabled>否</el-radio>
                                        <br />
                                    </el-radio-group>
                                </td>
                            </tr>
                        </table>
                    </el-card>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 修改宅基地批准书 -->
        <el-dialog :visible.sync="showForm" center width="66%" title="修改宅基地批准书" :show-close="false">
            <el-form :model="formInline" ref="formInline" style="text-align: center; font-size: 20px" size="medium"
                :rules="rules" label-width="230px">
                <table style="width: 100%" align="left" border="1" cellspacing="0" bordercolor="#AAAAAA">
                    <tr>
                        <td>宅基地批准书字号</td>
                        <td colspan="4">
                            <el-input v-model="formInline.approvalBookId" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td colspan="4">
                            <el-input v-model="formInline.name" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>批准用地面积（㎡）</td>
                        <td colspan="4">
                            <el-input v-model="formInline.applyHomesteadArea" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>其中：房基占地面积（㎡）</td>
                        <td colspan="4">
                            <el-input v-model.number="formInline.age" ref="age" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>土地所有权人</td>
                        <td colspan="4">
                            <el-input v-model="formInline.landOwner" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>土地用途</td>
                        <td colspan="4">
                            <el-input v-model="formInline.purpose" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>土地坐落</td>
                        <td colspan="4">
                            <el-input v-model="formInline.landLocation" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">四至</td>
                        <td>东</td>
                        <td>
                            <el-input v-model="formInline.east" autocomplete="off" disabled></el-input>
                        </td>
                        <td>南</td>
                        <td>
                            <el-input v-model="formInline.south" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>西</td>
                        <td>
                            <el-input v-model="formInline.west" autocomplete="off" disabled></el-input>
                        </td>
                        <td>北</td>
                        <td>
                            <el-input v-model="formInline.north" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>批准书有效期</td>
                        <td>自</td>
                        <td>
                            <el-date-picker style="width: 100%" prefix-icon="null" v-model="formInline.startDate"
                                type="month" format="yyyy年MM月" value-format="yyyy年MM月">
                            </el-date-picker>
                        </td>
                        <td>至</td>
                        <td>
                            <el-date-picker style="width: 100%" prefix-icon="null" v-model="formInline.finishDate"
                                type="month" format="yyyy年MM月" value-format="yyyy年MM月">
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td colspan="4">
                            <el-input v-model="formInline.approvalBookRemark" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>批准日期</td>
                        <td colspan="4">
                            <el-date-picker style="width: 100%" prefix-icon="null" v-model="formInline.approvalDate"
                                type="date" format="yyyy年MM月dd日" value-format="yyyy年MM月dd日"></el-date-picker>
                        </td>
                    </tr>
                </table>
                <el-button type="success" style="width: 100px" @click="updatePlan">确认修改</el-button>
                <el-button type="danger" style="width: 100px" @click="showForm = false">取消</el-button>
            </el-form>
        </el-dialog>

        <!-- 修改乡村规划许可证 -->
        <el-dialog :visible.sync="permitState" center width="66%" title="乡村建设规划许可证">
            <el-form :model="formInline" ref="formInline" style="text-align: center; font-size: 20px" size="medium"
                :rules="rules" label-width="230px">
                <table style="width: 100%" align="left" border="1" cellspacing="0" bordercolor="#AAAAAA">
                    <tr>
                        <td>乡村建设规划许可证字号</td>
                        <td colspan="4">
                            <el-input v-model="formInline.permitId" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>建设单位（个人）</td>
                        <td colspan="4">
                            <el-input v-model="formInline.name" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>建设项目名称</td>
                        <td colspan="4">
                            <el-input v-model="formInline.projectName" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>建设位置</td>
                        <td colspan="4">
                            <el-input v-model="formInline.landLocation" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>建设规模</td>
                        <td colspan="4">
                            <el-input v-model="formInline.projectScale" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>附图及附件名称</td>
                        <td colspan="4">
                            <el-input v-model="formInline.attachedMap" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>发行日期</td>
                        <td colspan="4">
                            <el-date-picker style="width: 100%" prefix-icon="null" v-model="formInline.permitDate"
                                type="date" format="yyyy年MM月dd日" value-format="yyyy年MM月dd日">
                            </el-date-picker>
                        </td>
                    </tr>
                </table>
                <el-button type="success" style="width: 100px" @click="updatePlan">确认修改</el-button>
                <el-button type="danger" style="width: 100px" @click="permitState = false">取消</el-button>
            </el-form>
        </el-dialog>

        <!-- 农村宅基地和建房（规划许可）申请审批表 -->
        <el-dialog :visible.sync="ApplicationState" center width="66%" title="修改审批表">
            <el-form :model="formInline" ref="formInline" style="text-align: center; font-size: 20px" size="medium"
                :rules="rules" label-width="230px">
                <el-card style="font-size: 20px">
                    <!-- 拟批准宅基地及建房（规划许可）情况 -->
                    <table style="width: 100%" align="center" border="1" cellspacing="0" bordercolor="#AAAAAA">
                        <tr>
                            <td rowspan="5">拟批准宅<br />基地及建房情况&nbsp;</td>
                            <td colspan="2">宅基地面积（㎡）</td>
                            <td style="text-align: center">
                                <el-input v-model="formInline.applyHomesteadArea" ref="applyHomesteadArea"
                                    autocomplete="off">
                                </el-input>
                            </td>
                            <td colspan="2">房基占地面积（㎡）</td>
                            <td>
                                <el-input v-model="formInline.applyFoundationArea" autocomplete="off"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>地址</td>
                            <td colspan="5" style="text-align: left">
                                <el-input v-model="formInline.applyAddress" class="input-with-select">
                                    <el-select v-model="formInline.villageType" slot="append" placeholder="组或社"
                                        style="width: 100px">
                                        <el-option label="组" value="组"></el-option>
                                        <el-option label="社" value="社"></el-option>
                                    </el-select>
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>四至</td>
                            <td colspan="4">
                        <tr>
                            <td>东至</td>
                            <td class="fourSite">
                                <el-input v-model="formInline.east" autocomplete="off"></el-input>
                            </td>
                            <td>南至</td>
                            <td class="fourSite">
                                <el-input v-model="formInline.south" autocomplete="off"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>西至</td>
                            <td class="fourSite">
                                <el-input v-model="formInline.west" autocomplete="off"></el-input>
                            </td>
                            <td>北至</td>
                            <td class="fourSite">
                                <el-input v-model="formInline.north" autocomplete="off"></el-input>
                            </td>
                        </tr>
                        </td>
                        <td rowspan="3">
                            建房类型：
                            <el-radio-group v-model="formInline.buildingType">
                                <el-radio :label="'1'" style="margin-top: 15px">原址翻建</el-radio><br />
                                <el-radio :label="'2'" style="margin-top: 15px; margin-left: -14px">改扩建</el-radio><br />
                                <el-radio :label="'3'" style="margin-top: 15px">异址新建</el-radio><br />
                                <el-radio :label="'4'" style="margin-top: 15px">其他类型</el-radio><br />
                            </el-radio-group>
                        </td>
                        </tr>
                        <tr>
                            <td>地类</td>
                            <td colspan="4">
                                <el-radio-group v-model="formInline.landType">
                                    <el-radio :label="'1'" style="margin-top: 15px">建设用地</el-radio>
                                    <el-radio :label="'2'" style="margin-top: 15px">未利用地</el-radio><br />
                                    <el-radio :label="'3'" style="margin-top: 15px; margin-left: -72px">农用地</el-radio>
                                    <el-radio :label="'4'" style="margin-top: 15px">其他</el-radio>
                                </el-radio-group>
                            </td>
                        </tr>
                        <tr>
                            <td>住房建筑面积（㎡）</td>
                            <td>
                                <el-input v-model="formInline.applyHousingArea" autocomplete="off"></el-input>
                            </td>
                            <td>建筑层数（层）</td>
                            <td>
                                <el-input v-model.number="formInline.applyLayer" autocomplete="off"></el-input>
                            </td>
                            <td>建筑高度（m）</td>
                            <td>
                                <el-input v-model="formInline.applyHight" autocomplete="off"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>乡镇自<br />然资源<br />部门审<br />查意见</td>
                            <td colspan="6">
                                <el-input ref="initState" type="textarea" placeholder="乡镇自然资源部门意见321" style="height=50%"
                                    v-model="formInline.naturalOpinions">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>征求其<br />他部门<br />意见</td>
                            <td colspan="6">
                                <el-input ref="initState" type="textarea" placeholder="其他部门意见" style="height=50%"
                                    v-model="formInline.otherOpinions">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>乡镇乡<br />建规划<br />部门审<br />查意见</td>
                            <td colspan="3">
                                <el-input ref="initState" type="textarea" placeholder="乡镇乡建规划部门审查意见" style="height=50%"
                                    v-model="formInline.constructionOpinions">
                                </el-input>
                            </td>
                            <td>乡镇农<br />业农村<br />部门审<br />查意见</td>
                            <td colspan="3">
                                <el-input ref="initState" type="textarea" placeholder="乡镇农业农村部门审查" style="height=50%"
                                    v-model="formInline.ruralOpinions">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>乡镇政<br />府审核<br />批准意<br />见</td>
                            <td colspan="6">
                                <el-input ref="initState" type="textarea" placeholder="乡镇政府审核批准意见" style="height=50%"
                                    v-model="formInline.governmentOpinions">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td colspan="6">
                                <el-input v-model="formInline.approvalContent" autocomplete="off"></el-input>
                            </td>
                        </tr>
                    </table>
                </el-card>
                <el-button type="success" style="width: 100px" @click="updateApplicationState">确认修改</el-button>
                <el-button type="danger" style="width: 100px" @click="ApplicationState = false">取消</el-button>
            </el-form>
        </el-dialog>

        <!-- 修改农村宅基地和建房（规划许可）验收意见表 -->
        <el-dialog :visible.sync="checkFormState" center width="70%" title="修改验收意见表">
            <el-form :model="formInline" ref="formInline" style="text-align: center; font-size: 18px" size="medium"
                :rules="rules" label-width="230px">
                <table class="detailTable" style="width: 100%" align="center" cellspacing="0">
                    <tr>
                        <td>申请户主</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.name" disabled></el-input>
                        </td>
                        <td>身份证号</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.idCard" disabled></el-input>
                        </td>
                    </tr>

                    <tr>
                        <td>乡村建设规划许可证号</td>
                        <td colspan="3">
                            <el-input v-model="formInline.permitId" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>农村宅基地批准书号</td>
                        <td colspan="3">
                            <el-input v-model="formInline.approvalBookId" autocomplete="off" disabled></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>开工日期</td>
                        <td>
                            <el-date-picker style="width: 100%" prefix-icon="null" v-model="formInline.checkStartDate"
                                type="month" format="yyyy年MM月" value-format="yyyy年MM月"></el-date-picker>
                        </td>
                        <td>竣工日期</td>
                        <td>
                            <el-date-picker style="width: 100%" prefix-icon="null" v-model="formInline.checkFinishDate"
                                type="month" format="yyyy年MM月" value-format="yyyy年MM月"></el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>批准宅基地面积（㎡）</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.applyHomesteadArea" disabled></el-input>
                        </td>
                        <td>实用宅基地面积（㎡）</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.practicalHomesteadArea"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>批准房基占地面积（㎡）</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.applyFoundationArea" disabled></el-input>
                        </td>
                        <td>实际房基占地面积（㎡）</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.actualFloorArea"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>批建层数/高度</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.applyLayer" style="width: 90px" disabled>
                            </el-input>层/
                            <el-input autocomplete="off" v-model="formInline.applyHight" style="width: 90px" disabled>
                            </el-input>米
                        </td>
                        <td>竣工层数/高度</td>
                        <td>
                            <el-input autocomplete="off" v-model="formInline.endLayer" style="width: 90px"></el-input>层/
                            <el-input autocomplete="off" v-model="formInline.endHight" style="width: 90px"></el-input>米
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td>拆旧退还宅基地情况</td>
                        <td colspan="3">
                            <el-radio-group v-model="formInline.demolitionOfHomestead">
                                <el-radio :label="'不属于'">不属于</el-radio>
                                <el-radio :label="'属于，已落实'">属于，已落实</el-radio>
                                <el-radio :label="'属于，尚未落实'">属于，尚未落实</el-radio>
                            </el-radio-group>
                        </td>
                    </tr>
                    <tr>
                        <td>验收单位意见</td>
                        <td colspan="2">
                            <span style="float: left">乡镇人民政府农业农村部门意见:</span>
                            <el-input autocomplete="off" type="textarea" placeholder="请输入内容"
                                v-model="formInline.checkRuralOpinions">
                            </el-input>
                        </td>
                        <td colspan="1">
                            <span style="float: left">乡镇人民政府乡建规划部门意见:</span>
                            <el-input autocomplete="off" type="textarea" placeholder="请输入内容"
                                v-model="formInline.checkConstructionOpinions"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>乡镇人民政府验收意见</td>
                        <td colspan="3">
                            <el-input autocomplete="off" type="textarea" placeholder="请输入内容"
                                v-model="formInline.checkGovernmentOpinions"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td colspan="3">
                            <el-input autocomplete="off" type="textarea" placeholder="请输入内容"
                                v-model="formInline.checkContent"></el-input>
                        </td>
                    </tr>
                </table>

                <el-button type="success" style="width: 100px" @click="updateCheckFormSave">确认修改</el-button>
                <el-button type="danger" style="width: 100px" @click="checkFormState = false">取消</el-button>
            </el-form>
        </el-dialog>
    </el-form>
</template>

<script>
    import store from "@/vuex/store";
    import {
        getBnBasicInfoApi,
        commitProApi,
        returnProApi,
        onceAgainApi,
    } from "@/api/applyApi";
    import {
        updatePlanApi,
        updatePictureApi,
        updateApplyFormApi,
    } from "@/api/planApi";
    import {
        getFamilyMenberByBiidApi
    } from "@/api/familyMenberApi";
    import {
        getDocumentListApi,
        downDocumentApi,
        deleteDocument,
    } from "@/api/documentApi";
    import {
        queryOpinionByApplyCodeApi
    } from "@/api/opinionApi";
    import {
        getChildrenAddress
    } from "@/api/addressDictionary";
    import {
        notPassApi,
        updateCheckFormApi
    } from "@/api/completApi";
    import config from "@/config/config";
    import axios from "axios";
    export default {
        name: "putBussi",
        data() {
            return {
                editState: false,
                state: "",
                stateName: "",
                permitState: false,
                adminPermission: store.getters.adminPermission,
                options: [{
                        value: "父子",
                        label: "父子",
                    },
                    {
                        value: "父女",
                        label: "父女",
                    },
                    {
                        value: "母子",
                        label: "母子",
                    },
                    {
                        value: "母女",
                        label: "母女",
                    },
                    {
                        value: "祖孙",
                        label: "祖孙",
                    },
                ],
                rules: {
                    name: [{
                        required: true,
                        message: "请输入申请人名称",
                        trigger: "blur",
                    }, ],
                    tel: [{
                            required: true,
                            message: "请输入联系方式",
                            trigger: "blur",
                        },
                        {
                            min: 7,
                            max: 14,
                            message: "长度7到14位",
                            trigger: "blur",
                        },
                    ],
                    villageCode: [{
                        required: true,
                        message: "请选择村组社区",
                        trigger: "change",
                    }, ],
                    idCard: [{
                            required: true,
                            message: "请输入身份证",
                            trigger: "blur",
                        },
                        {
                            min: 18,
                            max: 18,
                            message: "长度18位",
                            trigger: "blur",
                        },
                    ],
                    content: [{
                        required: true,
                        message: "请输入要件类型的备注",
                        trigger: "blur",
                    }, ],
                },
                showTownState: false,
                showForm: false,
                activeNameF: "1",
                url: "",
                activeNames: "1",
                centerDialogVisible: false,
                currentCode: store.getters.currentCode,
                headerRow: {
                    "font-size": "20px",
                    margin: "2%",
                    height: "80px",
                },
                styleRow: {
                    "font-size": "15px",
                    height: "50px",
                },
                opinionInfo: [{
                    uName: "",
                    opinion: "",
                    state: "",
                    order: "",
                    submitTime: "",
                }, ],
                viewState: "second",
                activeName: "second",
                uid: store.getters.uid,
                initState: false,
                ApplicationState: false,
                fileList1: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
                fileList5: [], //执法告知书
                formFile: new FormData(),
                formInline: {
                    uid: store.getters.uid,
                    typeName: "",
                    type: "",
                    applyCode: null,
                    name: "Xiaoyp",
                    sex: "男",
                    familyCount: "",
                    tel: null,
                    idCard: "",
                    address: "",
                    active: 0,
                    nowHomesteadArea: null, //现宅基地面积
                    nowBuildArea: null, //现建筑面积
                    nowBookId: "", //现权属证书号
                    nowSaveArea: "", //现保留面积
                    nowReturnArea: "", //退给村集体面积
                    nowOtherArea: "", //其他面积
                    applyHomesteadArea: "", //拟申请宅基地面积
                    applyFoundationArea: "", //拟申请房基占地面积
                    applyAddress: "", //拟申请宅基地及建房地址
                    east: "", //东至
                    south: "", //南至
                    west: "", //西至
                    north: "", //北至
                    buildingType: "", //建房类型
                    landType: "", //地类
                    applyHousingArea: "", //住房建筑面积
                    applyLayer: "", //层数
                    applyHight: "", //高度
                    content: "",
                    approvedHomesteadArea: "", //批准宅基地面积
                    practicalHomesteadArea: "", //实用宅基地面积
                    approvedFloorArea: "", //批准房基占地面积
                    actualFloorArea: "", //实用房基占地面积
                    approvedLayer: "", //批建层数
                    approvedHight: "", //批建高度
                    endLayer: "", //竣工层数
                    endHight: "", //竣工高度
                    demolitionOfHomestead: 1, //拆旧退还宅基地情况
                    constructionOpinions: "", //乡镇人民政府乡建规划部门意见
                    ruralOpinions: "", //乡镇人民政府农业农村部门意见
                    governmentOpinions: "", //乡镇人民政府验收意见
                    checkEast: "",
                    checkSouth: "",
                    checkWest: "",
                    checkNorth: "",
                    //文件列表
                    formFileList: [{
                        docName: "",
                        uploadTime: "",
                        applyCode: "",
                        url: "",
                        type: "",
                        file: "",
                    }, ],
                    townCode: "",
                    villageCode: "",
                    townList: [],
                    villageList: [],
                    opinion: "",
                },
                //申请信息
                apply: {
                    applyHomesteadArea: "", //拟申请宅基地面积
                    applyFoundationArea: "", //拟申请房基占地面积
                    applyAddress: "", //拟申请宅基地及建房地址
                    east: "", //东至
                    south: "", //南至
                    west: "", //西至
                    north: "", //北至
                    buildingType: "", //建房类型
                    landType: "", //地类
                    applyHousingArea: "", //住房建筑面积
                    applyLayer: "", //层数
                    applyHight: "", //高度
                    neighborMind: "是", //邻居意见
                },
                putFailyState: false,
                familyMember: [],
                memberDetail: {
                    listId: "",
                    name: "",
                    birthDate: "",
                    sex: "",
                    address: "",
                    relation: "",
                    idCard: "",
                    applyCode: "",
                    content: "",
                },
                checkFormState: false,
            };
        },
        created: function () {
            this.showTown();
        },
        methods: {
            editStateChange() {
                return !this.editState;
            },
            updateCheckFormSave() {
                this.formInline.uid = store.getters.uid;
                const loading = this.$loading({
                    //打开加载等待效果
                    lock: true,
                    text: "正在修改",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                //修改申请审批表
                updateCheckFormApi(this.formInline)
                    .then((res) => {
                        this.fileList1 = [];
                        this.fileList2 = [];
                        this.fileList3 = [];
                        this.fileList4 = [];
                        this.getDocumentList(this.formInline.applyCode);
                        loading.close();
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: "success",
                        });
                        this.checkFormState = false;
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message({
                            showClose: true,
                            message: "修改失败，请联系管理员",
                            type: "error",
                        });
                        loading.close();
                    });
            },
            notPass() {
                this.$prompt("请输入执法原因", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                    })
                    .then((value) => {
                        this.formInline.uid = this.uid;
                        this.formInline.notPassReason = value.value;
                        notPassApi(this.formInline)
                            .then((res) => {
                                this.$message({
                                    type: "info",
                                    message: "已提交至执法处",
                                });
                                this.$router.go(-1);
                            })
                            .catch((err) => {
                                this.$message.error("提交失败,请联系管理员");
                            });
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message({
                            type: "info",
                            message: "取消提交",
                        });
                    });
            },
            //修改验收意见表
            updateCheckForm(index, row) {
                this.checkFormState = true;
            },
            updatePermitBook(index, row) {
                this.permitState = true;
            },
            updateApplicationApproval(index, row) {
                this.ApplicationState = true;
            },
            //修改农村宅基地申请表
            updateApplicationState() {
                this.formInline.uid = store.getters.uid;
                const loading = this.$loading({
                    //打开加载等待效果
                    lock: true,
                    text: "正在修改",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                //修改申请审批表
                updateApplyFormApi(this.formInline)
                    .then((res) => {
                        this.fileList1 = [];
                        this.fileList2 = [];
                        this.fileList3 = [];
                        this.fileList4 = [];
                        this.getDocumentList(this.formInline.applyCode);
                        loading.close();
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: "success",
                        });
                        this.ApplicationState = false;
                    })
                    .catch((err) => {
                        console.log(err);
                        this.$message({
                            showClose: true,
                            message: "修改失败，请联系管理员",
                            type: "error",
                        });
                        loading.close();
                    });
            },
            updatePicture(index, row) {
                this.formInline.uid = store.getters.uid;
                const loading = this.$loading({
                    //打开加载等待效果
                    lock: true,
                    text: "正在修改",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                //修改意见表
                updatePictureApi(this.formInline)
                    .then((response) => {
                        this.fileList1 = [];
                        this.fileList2 = [];
                        this.fileList3 = [];
                        this.fileList4 = [];
                        this.getDocumentList(this.formInline.applyCode);
                        loading.close();
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: "success",
                        });
                        this.checkFormState = false;
                    })
                    .catch((error) => {
                        this.$message({
                            showClose: true,
                            message: "修改失败，请联系管理员",
                            type: "error",
                        });
                        loading.close();
                    });
                loading.close();
            },

            updatePlan(row) {
                this.formInline.uid = store.getters.uid;
                const loading = this.$loading({
                    //打开加载等待效果
                    lock: true,
                    text: "正在修改",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                updatePlanApi(this.formInline)
                    .then((response) => {
                        this.fileList1 = [];
                        this.fileList2 = [];
                        this.fileList3 = [];
                        this.fileList4 = [];
                        this.getDocumentList(this.formInline.applyCode);
                        loading.close();
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: "success",
                        });
                        this.showForm = false;
                        this.centerDialogVisible = false;
                        this.permitState = false;
                    })
                    .catch((error) => {
                        this.$message({
                            showClose: true,
                            message: "修改失败，请联系管理员",
                            type: "error",
                        });
                        loading.close();
                    });
                loading.close();
            },
            //添加家庭成员
            putMemberSave(memberDetail) {
                //新增
                if (memberDetail.listId == null || memberDetail.listId == "") {
                    //memberDetail.bbiid = this.formInline.id;
                    //回显
                    this.familyMember.push(memberDetail);

                    this.formInline.formMenberList = this.familyMember;
                } else {
                    //回显
                    this.familyMember.splice(memberDetail.listId - 1, 1, memberDetail);
                    this.formInline.formMenberList = this.familyMember;
                }
                //设为为空
                this.putMemberCancel();
                this.putFailyState = false;
            },
            //新增家庭成员时，点击取消，将数据清空
            putMemberCancel() {
                this.memberDetail = {
                    listId: "",
                    name: "",
                    age: "",
                    address: "",
                    relation: "",
                    idcard: "",
                    applyCode: this.formInline.applyCode,
                };

                this.putFailyState = false;
            },
            showTown() {
                if (this.currentCode.length > 9) {
                    this.showTownState = true;
                } else {
                    this.showTownState = false;
                    this.formInline.townCode = this.currentCode;
                }
            },
            showFileType() {
                for (let i = 0; i < this.formInline.formFileList.length; i++) {
                    return showFileType;
                }
            },
            //改变乡镇
            townChange() {
                if (this.formInline.townCode) {
                    getChildrenAddress(this.formInline.townCode).then((villageList) => {
                        this.formInline.villageList = villageList.data.data;
                        this.formInline.villageCode = this.formInline.villageList[0].code;
                    });
                }
            },
            //格式化意见状态
            opinionStateFormetter(row) {
                return row.state == "1" ?
                    "收件" :
                    row.state == "2" ?
                    "收件" :
                    row.state == "3" ?
                    "规划许可" :
                    row.state == "4" ?
                    "施工管理" :
                    row.state == "5" ?
                    "竣工管理" :
                    row.state == "6" ?
                    "业务归档" :
                    row.state == "7" ?
                    "执法处理" :
                    "未知";
            },
            sexFormatter(row) {
                return row.sex == "1" ? "男" : row.sex == "2" ? "女" : "未知";
            },

            formatDate(row) {
                let date = new Date(row.birthDate);
                let Y = date.getFullYear() + "-";
                let M =
                    date.getMonth() + 1 < 10 ?
                    "0" + (date.getMonth() + 1) :
                    date.getMonth() + 1;
                return Y + M;
            },
            //获取意见列表
            getOpinion(applyCode) {
                queryOpinionByApplyCodeApi(applyCode)
                    .then((res) => {
                        this.opinionInfo = res.data.data;
                    })
                    .catch((err) => {
                        this.$message.error(err.data.respondMessage);
                    });
            },

            //提交到 state += 1
            commitPro() {
                //如多是可编辑的，就是修改，调用updateApplicationState修改审批表方法
                if (this.editState) {
                    this.updateApplicationState();
                    return;
                }
                if (this.formInline.taskState == 0) {
                    this.$message({
                        showClose: true,
                        message: "该业务未进行外业，不能提交！",
                        type: "error",
                    });
                    return;
                } else {
                    this.formInline.uid = this.uid;
                    this.formInline.formFileList = this.fileList1
                        .concat(this.fileList2)
                        .concat(this.fileList3)
                        .concat(this.fileList4);
                    const loading = this.$loading({
                        //打开加载等待效果
                        lock: true,
                        text: "正在提交",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)",
                    });
                    if (this.formInline.state == 6) {
                        this.$message({
                            showClose: true,
                            message: "该业务已经归档，不能提交！",
                            type: "error",
                        });
                        return;
                    } else {
                        //如果必要建少一个，提示
                        //默认5个要件
                        if (this.formInline.formFileList.length > 5) {
                            commitProApi(this.formInline)
                                .then((response) => {
                                    let configs = {
                                        headers: {
                                            "Content-Type": "multipart/form-data",
                                        },
                                    };
                                    this.formFile.append("token", store.getters.token);
                                    this.formFile.append("applyCode", response.data.data.applyCode);
                                    axios
                                        .post(config.uploadApprovalUrl, this.formFile, configs)
                                        .then((res) => {
                                            this.$message.success("提交成功");
                                            this.$router.go(-1);
                                        })
                                        .catch((err) => {
                                            this.$message.error(err.respondMessage);
                                        });
                                    loading.close(); //瞬间没得
                                })
                                .catch((error) => {
                                    this.$message({
                                        showClose: true,
                                        message: "提交失败，请检查！",
                                        type: "error",
                                    });
                                    loading.close(); //瞬间没得
                                });
                        } else {
                            this.$message({
                                showClose: true,
                                message: "该件未到场，不能提交！",
                                type: "error",
                            });
                            loading.close(); //瞬间没得
                            return;
                        }
                    }
                }
            },
            //退件
            //退件 state - 1
            returnPro() {
                this.formInline.uid = this.uid;
                this.$prompt("请输入退件原因", "提示", {
                        confirmButtonText: "确定退件",
                        cancelButtonText: "取消",
                    })
                    .then(({
                        value
                    }) => {
                        const loading = this.$loading({
                            //打开加载等待效果
                            lock: true,
                            text: "正在退件",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        this.formInline.opinion = value;
                        returnProApi(this.formInline)
                            .then((response) => {
                                loading.close(); //瞬间没得
                                this.$router.go(-1);
                            })
                            .catch((error) => {
                                this.$message({
                                    showClose: true,
                                    message: "提交失败",
                                    type: "error",
                                });
                                loading.close(); //瞬间没得
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "取消退件",
                        });
                    });
            },
            //重做
            onceAgain() {
                this.formInline.uid = this.uid;
                this.$prompt("请输入重做原因", "提示", {
                        confirmButtonText: "确定重做",
                        cancelButtonText: "取消",
                    })
                    .then(({
                        value
                    }) => {
                        const loading = this.$loading({
                            //打开加载等待效果
                            lock: true,
                            text: "正在重做",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        this.formInline.opinion = value;
                        onceAgainApi(this.formInline)
                            .then((response) => {
                                loading.close(); //瞬间没得
                                this.$router.go(-1);
                            })
                            .catch((error) => {
                                this.$message({
                                    showClose: true,
                                    message: "重做失败",
                                    type: "error",
                                });
                                loading.close(); //瞬间没得
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "取消重做",
                        });
                    });
            },
            //删除要件
            handleDeleteFile(index, row) {
                if (row.state == this.formInline.active + 2) {
                    if (row.url) {
                        this.$confirm("确定删除吗?", "提示", {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning",
                            })
                            .then(() => {
                                deleteDocument(row)
                                    .then((res) => {
                                        this.$message({
                                            showClose: true,
                                            message: "删除成功",
                                            type: "success",
                                        });
                                        this.formInline.formFileList.splice(index, 1);
                                    })
                                    .catch((error) => {
                                        this.$message({
                                            showClose: true,
                                            message: "删除失败！",
                                            type: "error",
                                        });
                                    });
                            })
                            .catch(() => {
                                this.$message({
                                    type: "info",
                                    message: "已取消删除",
                                });
                            });
                    }
                } else {
                    this.$message({
                        type: "info",
                        message: "该状态下不能删除该文件",
                    });
                }
            },
            //下载要件
            downDocument(index, row) {
                if (row.url) {
                    downDocumentApi(row.id);
                    this.$message({
                        showClose: true,
                        message: "下载成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: "下载要件缺失，请联系管理员",
                        type: "error",
                    });
                }
            },

            //删除家庭成员
            handleDelete(index, row) {
                //回显
                this.familyMember.splice(index, 1);
            },
            //修改某一个家庭成员
            handleEdit(index, row) {
                this.putFailyState = true;
                this.memberDetail = row;
            },

            //表格的序号
            indexMethod(index) {
                //为了给每一行数据曾家一个标识符，用于判断是否是修改还是添加
                this.familyMember[index].listId = index + 1;
                return index + 1;
            },
            //获取家庭成员
            getFamilyMenber(applyCode) {
                if (applyCode === -1) {
                    return;
                } else {
                    getFamilyMenberByBiidApi(applyCode)
                        .then((response) => {
                            this.familyMember = response.data.data.items;

                            this.formInline.formMenberList = this.familyMember;
                        })
                        .catch((error) => {
                            this.$message({
                                showClose: true,
                                message: error,
                                type: "error",
                            });
                            this.tableLoding = false;
                        });
                }
            },
            // 获取要件列表
            getDocumentList(applyCode) {
                //this.formInline.formFileList = this.fileList;
                if (applyCode === -1) {
                    this.formInline.formFileList = this.fileList1;
                    return;
                } else {
                    getDocumentListApi(applyCode)
                        .then((response) => {
                            response.data.data.items.forEach((file) => {
                                if (file.state == "2") {
                                    this.fileList1.push(file);
                                    this.formInline.formFileList = this.fileList1;
                                } else if (file.state == "3") {
                                    this.fileList2.push(file);
                                    this.formInline.formFileList = this.fileList2;
                                } else if (file.state == "4") {
                                    this.fileList3.push(file);
                                    this.formInline.formFileList = this.fileList3;
                                } else if (file.state == "5") {
                                    this.fileList4.push(file);
                                    this.formInline.formFileList = this.fileList4;
                                } else if (file.state == "7") {
                                    this.fileList5.push(file);
                                    this.formInline.formFileList = this.fileList5;
                                }
                            });
                        })
                        .catch((error) => {
                            this.$message({
                                showClose: true,
                                message: error,
                                type: "error",
                            });
                            this.tableLoding = false;
                        });
                }
            },

            cancle() {
                this.$router.go(-1);
            },
            //预览handleEditFile
            handleEditFile(index, row) {
                console.log(row);
                if (row.url) {
                    var previewUrl = row.url.split(":");
                    var url = config.baseUrl + previewUrl[1];
                    console.log(url);
                    if (/\.(jpe?g|png|gif)$/i.test(row.url)) {
                        this.url = url;
                        this.srcList = url;
                        this.centerDialogVisible = true;
                    } else {
                        window.open(url, "_blank");
                    }
                    // window.open(config.baseUrl + previewUrl[1], "_blank");
                } else {
                    this.$message({
                        showClose: true,
                        message: "该要件已缺失，请联系管理员",
                        type: "error",
                    });
                    return;
                }
            },
            //相同文件提示
            checkFile(list, fileObj) {
                var flag = true;
                for (let i = list.length - 1; i >= 0; i--) {
                    if (list[i].docName == fileObj.docName) {
                        this.$message({
                            showClose: true,
                            message: list[i].docName + "重复了，请检查",
                            type: "message",
                        });
                        flag = false;
                        return flag;
                    }
                }
                return flag;
            },
            //上传规划许可证书
            uploadLicence(file) {
                let fileObj = {
                    docName: "规划许可证书（已盖章）",
                    uploadTime: this.getCurrentTime(),
                    applyCode: this.applyCode,
                    url: "",
                    type: "",
                    file: file,
                    fileName: "licence",
                };
                if (this.checkFile(this.formInline.formFileList, fileObj)) {
                    this.formInline.formFileList.push(fileObj);
                    this.formFile.append("licence", file);
                    this.colorform = "#33CCFF";
                }
                return false;
            },
            //宅基地批准书（已盖章）
            uploadApprove(file) {
                let fileObj = {
                    docName: "宅基地批准书（已盖章）",
                    uploadTime: this.getCurrentTime(),
                    applyCode: this.applyCode,
                    url: "",
                    type: "",
                    file: file,
                    fileName: "approval",
                };
                if (this.checkFile(this.formInline.formFileList, fileObj)) {
                    this.formInline.formFileList.push(fileObj);
                    this.formFile.append("approval", file);
                    this.colorform = "#33CCFF";
                }
                return false;
            },
            // 验收意见表（已盖章）
            uploadCheck(file) {
                let fileObj = {
                    docName: "验收意见表（已盖章）",
                    uploadTime: this.getCurrentTime(),
                    applyCode: this.applyCode,
                    url: "",
                    type: "",
                    file: file,
                    fileName: "check",
                };
                this.formInline.formFileList.push(fileObj);
                this.formFile.append("check", file);
                return false;
            },
            getCurrentTime() {
                var myDate = new Date();
                var year = myDate.getFullYear();
                var mounth = myDate.getMonth() + 1;
                var day = myDate.getDate();
                var getUplodTime = year + "-" + mounth + "-" + day;
                return getUplodTime;
            },
            //获取申请信息
            getApplyInfo(applyCode) {
                getBnBasicInfoApi(applyCode).then((res) => {
                    this.apply = res.data.data.apply;
                });
            },

            updatePro(index, row) {
                this.showForm = true;
            },
            updatePermitLicence(index, row) {
                this.showForm = true;
            },
        },
        mounted() {
            if (this.formInline.applyCode) {
                //setTimeout(function() {
                this.getFamilyMenber(this.formInline.applyCode);
                this.getDocumentList(this.formInline.applyCode);
                this.getOpinion(this.formInline.applyCode);
                this.getApplyInfo(this.formInline.applyCode);
                //}, 500);
            } else {
                //防止没有数据的时候，家庭成员显示列表
                this.getFamilyMenber(-1);
                this.getDocumentList(-1);
            }
        },
        created: function () {
            //获取数据
            this.formInline = this.$route.query;
            this.state = this.formInline.state + "";
            if (this.formInline.state == 3) {
                this.stateName = "规划许可";
            } else if (this.formInline.state == 4) {
                this.stateName = "施工管理";
            } else if (this.formInline.state == 5) {
                this.stateName = "竣工验收";
            } else if (this.formInline.state == 6) {
                this.stateName = "业务归档";
            } else if (this.formInline.state == 2) {
                this.stateName = "业务收件";
            } else {
                this.stateName = "未知节点";
            }
        },
    };
</script>

<style>
    .uploadStyle {
        margin-top: 2%;
        text-align: center;
        height: 80px;
        font-size: 18px;
    }

    .el-tabs__nav-wrap::after {
        content: "";
        position: absolute;
        left: 100px;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #e4e7ed;
        z-index: 1;
    }

    .uploadStyle {
        margin-top: 1%;
        text-align: center;
        height: 80px;
        font-size: 18px;
    }

    .detailTable {
        border-right: 1pt solid gray;
        border-bottom: 1pt solid gray;
        color: black;
    }

    .detailTable .el-input .el-input__inner {
        border: none;
        background-color: white;
        color: black;
    }

    .detailTable td {
        border-top: 1pt solid gray;
        border-left: 1pt solid gray;
    }

    .detailTable .el-input-group__append .el-select .el-input__inner {
        background-color: white;
        color: black;
        border-left: 1pt solid gray;
    }

    .detailTable .el-textarea .el-textarea__inner {
        background-color: white;
        border: none;
        font-size: 18px;
        color: black;
    }

    .detailTable .el-radio__input.is-disabled+span.el-radio__label {
        background-color: white;
        border: none;
        font-size: 18px;
        color: black;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .inputTable .el-input.is-disabled .el-input__inner {
        border: none;
        background: white;
        color: black;
    }

    .inputTable {
        border-right: 1pt solid gray;
        background: white;
        color: black;
    }

    .inputTableLast {
        border-right: 1pt solid gray;
        border-bottom: 1pt solid gray;
        background: white;
        color: black;
    }

    .inputTableLast td {
        border: 1pt solid gray;
        border-bottom: none;
        border-right: none;
        height: 60px;
    }

    .inputTable .el-select .el-input.is-disabled .el-input__inner {
        background: white;
        color: black;
    }

    .inputTableLast .el-input.is-disabled .el-input__inner {
        border: none;
        background: white;
        color: black;
    }

    .inputData .el-select .el-input.is-disabled .el-input__inner {
        background: white;
        color: black;
        border: 1pt solid #727477;
    }

    .inputData .el-radio__input.is-disabled+span.el-radio__label {
        color: black;
    }

    .inputData .el-form-item__label {
        color: black;
    }

    .inputData .el-radio__input.is-disabled.is-checked+span.el-radio__label {
        color: #6280ef;
    }

    .detailTable .el-radio__input.is-disabled.is-checked+span.el-radio__label {
        color: #6280ef;
    }

    .inputData .el-input .el-input__inner {
        border: none;
    }

    .inputTable {
        border-right: 1pt solid gray;
    }

    .inputTable td {
        border: 1pt solid gray;
        border-bottom: none;
        border-right: none;
        height: 60px;
    }

    .inputTableLast {
        border-right: 1pt solid gray;
        border-bottom: 1pt solid gray;
    }

    .inputTableLast td {
        border: 1pt solid gray;
        border-bottom: none;
        border-right: none;
        height: 60px;
    }

    .cardStyle .el-input.is-disabled .el-input__inner {
        background-color: #ffffff;
        cursor: default;
        color: #000000;
        font-size: 18px;
    }

    .cardStyle .el-textarea.is-disabled .el-textarea__inner {
        background-color: #ffffff;
        cursor: default;
        color: #000000;
        font-size: 18px;
    }

    .cardStyle .el-collapse-item__header {
        font-size: 18px;
    }

    .details .el-tabs__item {
        font-size: 18px !important;
    }
</style>